<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Plugin for handsontable using RuleJS library (formulas parser)</title>
  <script data-jsfiddle="common" src="./assets/js/plugins/jquery.js"></script>

  <!-- handsontable v1 -->
  <script data-jsfiddle="common" src="./assets/js/plugins/handsontable/handsontable.full.js"></script>
  <link data-jsfiddle="common" rel="stylesheet" media="screen" href="./assets/js/plugins/handsontable/handsontable.full.css">

  <!-- ruleJS -->
  <link rel="stylesheet" media="screen" href="./assets/js/plugins/handsontable/handsontable.formula.css">
<!-- 
  <script data-jsfiddle="common" src="./assets/js/plugins/rule/lib/lodash/lodash.js"></script>
  <script data-jsfiddle="common" src="./assets/js/plugins/rule/lib/underscore.string/underscore.string.js"></script>
  <script data-jsfiddle="common" src="./assets/js/plugins/rule/lib/moment/moment.js"></script>
  <script data-jsfiddle="common" src="./assets/js/plugins/rule/lib/numeral/numeral.js"></script>
  <script data-jsfiddle="common" src="./assets/js/plugins/rule/lib/numericjs/numeric.js"></script>
  <script data-jsfiddle="common" src="./assets/js/plugins/rule/lib/js-md5/md5.js"></script>
  <script data-jsfiddle="common" src="./assets/js/plugins/rule/lib/jstat/jstat.js"></script>
  <script data-jsfiddle="common" src="./assets/js/plugins/rule/lib/formulajs/formula.js"></script>
  <script data-jsfiddle="common" src="./assets/js/plugins/rule/js/parser.js"></script>
  <script data-jsfiddle="common" src="./assets/js/plugins/rule/js/ruleJS.js"></script> -->
  <script data-jsfiddle="common" src="./assets/js/plugins/rule/full/ruleJS.all.full.js"></script>

  <script data-jsfiddle="common" src="./assets/js/plugins/handsontable/handsontable.formula.js"></script>


  <script src="http://handsontable.github.io/handsontable-ruleJS/lib/samples.js"></script>
  <script src="http://handsontable.github.io/handsontable-ruleJS/lib/highlight/highlight.pack.js"></script>
  <link rel="stylesheet" media="screen" href="http://handsontable.github.io/handsontable-ruleJS/lib/highlight/styles/github.css">
  <link rel="stylesheet" media="screen" href="http://handsontable.github.io/handsontable-ruleJS/css/font-awesome/css/font-awesome.min.css">
  <link data-jsfiddle="common" rel="stylesheet" media="screen" href="http://handsontable.github.io/handsontable-ruleJS/css/samples.css">
</head>
<body>
<div class="wrapper">
  <div class="wrapper-row">

    <div id="container">
      <div class="columnLayout">

        <div class="rowLayout">
          <div class="descLayout">
            <div class="pad" data-jsfiddle="example1">

              <h2>Integration ruleJS library with Handsontable</h2>

              <p>The following demo uses <code>ruleJS</code> library to parse some formulas.<br>
                To enable this feature, use setting <code>formulas: true</code></p>
              <div id="example1"></div>
              <div id="example2"></div>
            </div>
          </div>

          <div class="codeLayout">
            <div class="pad">
              <div class="jsFiddle">
                <button class="jsFiddleLink" data-runfiddle="example1">Edit in jsFiddle</button>
              </div>
              <script data-jsfiddle="example1">
                var data1 = [
                  ['=$B$2', "Maserati", "Mazda", "Mercedes", "Mini", "=A$1"],
                  [2009, 0, 2941, 4303, 354, 5814],
                  [2010, 5, 2905, 2867, '=SUM(A4,2,3)', '=$B1'],
                  [2011, 4, 2517, 4822, 552, 6127],
                  [2012, '=SUM(A2:A5)', '=SUM(B5,E3)', '=A2/B2', 12, 4151]
                ];

                var data2 = [
                  ['=$B$2', "Maserati", "Mazda", "Mercedes", "Mini", "=A$1"],
                  [2009, 0, 2941, 4303, 354, 5814],
                  [2010, 5, 2905, 2867, '=SUM(A4,2,3)', '=$B1'],
                  [2011, 4, 2517, 4822, 552, 6127],
                  [2012, '=SUM(A2:A5)', '=SUM(B5,E3)', '=A2/B2', 12, 4151]
                ];

                var container1 = $('#example1');

                container1.handsontable({
                  data: data1,
                  minSpareRows: 1,
                  colHeaders: true,
                  rowHeaders: true,
                  contextMenu: true,
                  manualColumnResize: true,
                  formulas: true
                });

                var container2 = $('#example2');

                container2.handsontable({
                  data: data2,
                  minSpareRows: 1,
                  colHeaders: true,
                  rowHeaders: true,
                  contextMenu: true,
                  manualColumnResize: true,
                  formulas: false
                });

              </script>
            </div>
          </div>
        </div>


      </div>

    </div>

  </div>
</div>

</body>
</html>
